<template>
  <div class="w_h_100">
    <div class="inlet">报表统计 > 监管报送 > 月报 > <span class="size">代偿追偿信息表</span></div>
    <div class="header d_f j_c_s_b m_t_10">
      <div class="d_f">
        <h4>月度报送</h4>
        <el-dropdown @command="handleCommand">
          <span class="dropdown">
            {{ month }}
            <el-icon class="">
              <ArrowDown />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in arr" :key="index" :command="item">{{ item }}月</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-button type="primary" :icon="Bottom" @click="downloadOut">下载</el-button>
    </div>
    <div class="report m_t_16 ">
      <div class="w_100 headTips d_f j_c_s_b">
        <div class="d_f a_i_c">
          <div class="line"></div>
          代偿追偿信息表
        </div>
      </div>
      <mytable :fields="fields" ref="tableRef" :values="{}" :defaultList="records" class="m_t_20" :isSelection="false"
        :isPaginationShow="false" :handle="false" :serial="false">
        <template v-slot:overdueRate="{ row }">
          {{ row.overdueRate || '0' }}%
        </template>
      </mytable>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { superviseList, superviseDownload } from "../../../api/report"
import { momentDate, momentStartOf, derivation, momentEndOf } from '../../../utils/date'
import { compensationRecovery } from '../../../type/report'
import { useRoute } from 'vue-router';
import { Bottom } from '@element-plus/icons-vue'
export default defineComponent({
  name: '',
  setup() {
    const data: compensationRecovery = reactive({
      startTime: '',
      endTime: '',
      key: '',
      month: '',
      arr: [],
      fields: [
        {
          label: '被担保人名称',
          prop: 'guaCustomerName',
        },
        {
          label: '合同编号',
          prop: 'contractNo',
          width: '100px',
        },
        {
          label: '还款日期',
          prop: 'repaymentDate',
        },
        {
          label: '应还金额（元）',
          prop: 'amountPayable',
        },
        {
          label: '逾期天数',
          prop: 'overdueDays',
        },
        {
          label: '逾期利率',
          prop: 'overdueRate',
        },
        {
          label: '代偿金额（元）',
          prop: 'amountCompensation',
        },
        {
          label: '是否有抵（质）押物',
          prop: 'haveProperty',
          width: '100px',
        },
        {
          label: '是否执行追偿方案',
          prop: 'execRecoverDebt',
        },
        {
          label: '追偿收入（元）',
          prop: 'recoverDebt',
        },
      ],
      records: [],
      value: '',
    })
    const route = useRoute()
    onBeforeMount(() => {
      let num = momentDate('MM')
      for (let i = 1; i <= num; i++) {
        data.arr.push(i)

      }
      data.startTime = route.query.startTime as string
      data.endTime = route.query.endTime as string
      data.key = route.query.key as string
      data.month = route.query.month as string
      data.value = route.query.value as string
      methods.getData()
    })

    const methods = {
      getData() {
        superviseList({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime, usci: data.value }).then((res: any) => {
          res.map((item: any) => {
            for (let i in item) {
              if (item[i] == '' || item[i] == null || item[i] == undefined) {
                item[i] = '-'
              }
            }
          })
          data.records = res
        })
      },
      //下载全部模版
      downloadOut() {
        superviseDownload({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime, usci: data.value }).then((res: any) => {
          derivation(res, '代偿追偿信息表')
        })
      },
      //选择月份
      handleCommand(e: number) {
        let year = momentDate('YYYY')
        let month = e < 10 ? '0' + e : e
        data.key = String(month)
        data.month = year + '年' + month + '月'
        methods.getBoundingClientRect()
      },
      //获取开始时间跟结束事件
      getBoundingClientRect() {
        let month = data.month.replace('年', '-')
        month = month.replace('月', '-')
        data.startTime = momentStartOf(month, 'YYYY-MM-DD')
        if (data.key == momentDate('MM')) {
          data.endTime = momentEndOf(month, 'YYYY-MM-DD')
        } else {
          data.endTime = momentEndOf(month, 'YYYY-MM-DD')
        }
        methods.getData()
      },
    }
    return {
      ...toRefs(data),
      ...methods, Bottom
    }
  }
})
</script>
<style scoped lang='scss'>
.header {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 20px;
  padding: 24px 32px;

  .dropdown {
    color: #1878FF;
    font-size: 16px;
    font-weight: bold;
    margin-left: 24px;
  }
}

.report {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: calc(100% - 164px);
  padding: 20px 32px;
}
</style>